<template>
  <div style="padding: 0 20px">
    <titleP><span slot="tit">相关电影</span></titleP>
    <div class="right-wrap-all">
      <div class="xiangguan-wrap" v-for="(item,index) in MgetLx" @click="details(item.id)">
        <el-image class="img" :src="item.image" lazy></el-image>
        <span>{{item.title1}}</span>
        <span>{{item.num}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import titleP from "./movieDetailTitle.vue";
export default {
  props:['MgetLx'],
  data() {
    return {};
  },
  components: {
    titleP,
  },
  created() {},
  methods: {
    details(id){
      // console.log(id)
      this.$router.push('/movie/detail?id='+id)
      // 刷新页面
      this.$router.go(0)

    }
  },
};
</script>

<style lang="scss" scoped>
.right-wrap-all {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .xiangguan-wrap {
      margin: 13px 0;
      cursor: pointer;
    width: 128px;
    height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .img {
      width: 128px;
      height: 180px;
    }
    span{
      margin: 5px 0;
    }
    >span:nth-child(3){
      color: #ee780a;
      font-size: 28px;
    }
    >span:nth-child(2){
      color: #928c87;
      font-size: 15px;
    }
  }
}
</style>
